<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/static/commons/taglibs.jsp"%>
<%@ include file="/static/commons/meta.jsp"%>
<%@ include file="/static/commons/jquery-easyui.jsp"%>
<html>
<head>
<title>${title }</title>
<link rel="stylesheet" href="${ctx }/static/styles/basic/basic.css" />
<link rel="stylesheet" href="${ctx }/static/styles/frame/main.css" />
<link rel="stylesheet" href="${ctx }/static/styles/frame/searchBtn.css" />
<link rel="stylesheet" href="${ctx }/static/styles/frame/searchCondition.css" />
<link rel="stylesheet" href="${ctx }/static/styles/template/template.css" />
<script type="text/javascript" src="${ctx }/static/scripts/jquery.scrollto.js"></script>
<!-- 检定证书 -->
</head>
<body onload="init()">
	<input type="hidden" name="RequestVerificationToken" value="${RequestVerificationToken}" />
	<div class="width_100 group_box">
		<div class="group_search width_100">
			<div class="rewrite_select f_l border_left_1" style="width: 330px">
				<label class="left_desc" style="width: 70px;">模板名称：</label>
				<select class="normal_select" id="template" name="p_template" style="width: 260px;">
					<option value="检定证书-CO">检定证书-CO</option>
					<option value="检定证书-Ex">检定证书-Ex</option>
					<option value="检定证书-H2S">检定证书-H2S</option>
					<option value="检定证书-O2">检定证书-O2</option>
					<option value="检定证书-SO2">检定证书-SO2</option>
					<option value="检定证书-氨气">检定证书-氨气</option>
					<option value="检定证书-氯气">检定证书-氯气</option>
					<option value="检定证书-空呼">检定证书-空呼</option>
				</select>
			</div>
			<div class="clear_both"></div>
		</div>
	</div>
	
	<div id="hero-slider">
		<ul>
			<li><a href="#" rel="#panel-1" class="active" id="01">正面</a></li>
			<li><a href="#" rel="#panel-2" id="02">背面</a></li>
		</ul>
		<div class="mask">
			<div class="slider-body">
				<div class="panel" id="panel-1">
					<iframe id="listFrame_1" frameBorder="0" scrolling="auto" style="width: 100%; height: 100%;"></iframe>
				</div>
				<div class="panel" id="panel-2">
					<iframe id="listFrame_2" frameBorder="0" scrolling="auto" style="width: 100%; height: 100%;"></iframe>
				</div>
			</div>
		</div>
		<div class="clear"></div>
	</div>
</body>
<script type="text/javascript">
var headers = {};
headers['__RequestVerificationToken'] = "${RequestVerificationToken}";
function init(){
	set_iframe_h();
	$(window).resize(function(){
		set_iframe_h();
	});
	$('.easyui-combobox').combobox();
}
//设置ifream 高度
function set_iframe_h(){
	var win_height  = $(window).height(),
		win_width = $(window).width();
	var func_line_h = $('.group_box').outerHeight(true),
		nav_width = $('#hero-slider ul').outerWidth(true);
	var list_height = win_height - func_line_h,
		list_width = win_width - nav_width;
	//$('.listFrame').css('height',list_height-10);
	$('#hero-slider ul').css('height',list_height-25);
	$('#hero-slider .panel').css('height',list_height-10);
	$('.mask').css({'height':list_height-10,'width':list_width-3});
}

$(function(){
	$('#hero-slider ul a').click(function () {
		$('.customBlock ul a').removeClass('active');
		$(this).addClass('active');	
		$('.mask').scrollTo($(this).attr('rel'), 300);
		
		var id = this.id;
		if('01'==id){
			$(this).addClass('active');
			$('#02').removeClass('active');
		}else{
			$(this).addClass('active');
			$('#01').removeClass('active');
		}
	    return false;		
	});
	
	var $src = "${ctx}/static/template/检定证书/";
	$('#listFrame_1').attr('src', $src+"检定证书-CO_0.html");
	$('#listFrame_2').attr('src', $src+"检定证书-CO_1.html");
	
	$('#template').on('change', function(){
		$('#listFrame_1').attr('src', $src+this.value+"_0.html");
		$('#listFrame_2').attr('src', $src+this.value+"_1.html");
	});
});
</script>
</html>